<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<%@ page import="com.storyroad.responseClasses.StoryView"%>
<%@ page import="java.util.ArrayList"%>

<%
	ArrayList<StoryView> recommendations = (ArrayList<StoryView>) request
			.getAttribute("recommendations");
%>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="bootstrap/assets/ico/favicon.png">

<title>Recommendations</title>

<!-- Bootstrap core CSS -->
<link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Custom styles for this template -->
<link href="css/recommendations.css" rel="stylesheet">

</head>

<body background="img/back_nologo.png">
	<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
		<div class="container">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse"
					data-target=".navbar-collapse">
					<span class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				<img src="img/logo_writing.png" id="top_logo">
			</div>
			<div class="collapse navbar-collapse">
				<ul class="nav navbar-nav">
					<li><a href="MainPage">Home Page</a></li>
					<li class="active"><a href="GetRecommendations">Recommendations</a></li>
					<li><a href="Search.jsp">Search Stories</a></li>
					<li><a href="GetFollowers">Following</a></li>
				</ul>
				<ul class="nav navbar-nav" id="profile_buttons">
					<li><a href="GetProfile">My Profile</a></li>
					<li><a href="Logout">Logout</a></li>
				</ul>
			</div>
			<!-- /.nav-collapse -->
		</div>
		<!-- /.container -->
	</div>
	<!-- /.navbar -->

	<div class="container">
		<div class="well sidebar-nav" id="recommend-page-container">
			<h2>
				<center>Recommendations</center>
			</h2>
		</div>
		<div class="well sidebar-nav" id="recommend-page-container">
		<%for(StoryView sView : recommendations){ %>
			<div id="story" class="active">
				<div id="profile-img">
					<img src="<%out.print(sView.getUserPicture()); %>" alt="Profile Photo" height="100"
						width="100">
					<p>
						<b><center><%out.print(sView.getUser()); %></center></b>
					</p>
				</div>
				<div id="story-info">
					<h3 id="story-header"><a href="ReadStory?story_id=<% out.print(sView.getS_id());%>"
					> <%out.print(sView.getTitle()); %></a></h3>
					<p id="tag"><%out.print(sView.getSummary()); %></p>
					<p id="tag">Rating: <%out.print(sView.getAvgRating()); %></p>
					<p id="tag"><%out.print(sView.getTags()); %></p>
				</div>
			</div>
			<%} %>
		</div>
	</div>
</body>
</html>